<template>
  <div id="submitOrder">
    <TopSubfield>我是顶部</TopSubfield>
    <div class="indent">
      <div class="indent-top">
        <img class="indetImg" src="/static/img/signLogo.7c2198e.png" alt>
        <div class="process">
          <el-steps :active="active" finish-status="success">
            <el-step title="1 提交订单"></el-step>
            <el-step title="2 确认支付"></el-step>
            <el-step title="3 完成购买"></el-step>
          </el-steps>
        </div>
      </div>
      <div>
        <div class="ensure">
          <p>确定订单信息</p>
        </div>
        <div>
          <el-table :data="tableData" border style="width: 100%;">
            <el-table-column prop="date" label="商品名称" width="680"></el-table-column>
            <el-table-column prop="name" label="单价" width="180"></el-table-column>
            <el-table-column prop="address" label="数量"></el-table-column>
            <el-table-column prop="total" label="总价"></el-table-column>
          </el-table>
        </div>
        <div class="information">
          <p class="small">
            绑定手机号：
            <span>15827245422</span>
          </p>
          <div class="div-btn">
            <el-button type="danger" @click="notarize">立即支付</el-button>
          </div>
        </div>
      </div>
    </div>
    <bottomSynopsis>我是底部公共部分</bottomSynopsis>
  </div>
</template>

<script>
import TopSubfield from "@/components/top/TopSubfield"; //公共头部
import bottomSynopsis from "@/components/bottom/bottomSynopsis"; //公共底部
export default {
  name: "submitOrder",
  data() {
    return {
      active: 0,
      tableData: [
        {
          date: "胃典火锅：胃典火锅2人餐",
          name: "138.00",
          address: "1",
          total: "138"
        }
      ]
    };
  },
  components: {
    TopSubfield,
    bottomSynopsis
  },
  methods: {
    notarize() {
      if (this.active++ > 2) this.active = 0; //屏蔽下面的跳转地址便可模拟支付流程
      this.$router.push('/confirmPayment')
    }
  }
};
</script>

<style lang="less" scoped>
#submitOrder {
  width: 100%;
  background-color: #ffffff;
  .indent {
    width: 1340px;
    margin: 0 auto;
    padding-bottom: 100px;
    .indent-top {
      padding-top: 20px;
      .indetImg {
        display: inline-block;
        width: 165px;
        height: 57px;
        vertical-align: middle;
      }
      .process {
        width: 500px;
        padding-left: 80px;
        display: inline-block;
        vertical-align: middle;
        .el-steps--simple {
          background-color: #ffffff;
        }
      }
    }
    .ensure {
      padding: 40px 0px 20px 0px;
      letter-spacing: 1px;
      color: #000;
      font-size: 18px;
    }
    .information {
      width: 100%;
      text-align: right;
      p {
        margin: 24px 0px 12px 0px;
        letter-spacing: 1px;
        font-weight: 600;
        span {
          font-weight: 500;
        }
      }
      .el-button {
        font-size: 18px;
      }
    }
  }
}
</style>


